<!--  -->
<template>
  <div class="mytodos">
    <h1>秃头丝</h1>
    <div class="top">
      <span class="top1">
        >
      </span>
      <input type="text" name="" class="top2" v-model="thetxt" @keyup.enter="add"/>
    </div>
    <div class="mian">
      <div class="show" v-for="(v,i) in guolvqi" :key="v.id">
        <input type="checkbox" class="mian1" v-model="v.duicou">
        <p class="mian11" v-show="!xian">{{v.txt}}</p>
        <input type="mian2" v-model="v.txt" v-show="xian">
        <span class="mian3" @click="deletea(i)">x</span>
      </div>
    </div>
    <div class="bottom">
      <span class="bo1" @click="yemian('ok')">已经完成</span>
      <span class="bo2" @click="yemian('ing')">进行中</span>
      <span class="bo3" @click='yemian("all")'>All</span>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapGetters } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  
  components: {},
  data() {
    //这里存放数据
    return {
      thetxt:'',
      xian:'',
    };
  },
  computed: {
    ...mapGetters(["guolvqi", 'zhuangtai']),
    // 过滤后的todos
  },
  //监听属性 类似于data概念
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    add: function () {
      if (!this.thetxt) {
        return false;
      }
      this.$store.commit({
        type: "add",
        payload: {
          txt: this.thetxt,
          duicou: false,
          id: Date.now(),
        },
      });
      this.thetxt = ''
    },
    yemian:function(a){
      this.$store.commit({
        type:"gaizhuangtai",
        payload:{
          a
        }
      })
    },
    deletea:function(i){
      this.$store.commit({
        type:"shangchu",
        payload:{
          i
        }
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
div.mytodos {
  h1{
    margin:0 auto 30px;
  }

  div.top {
    margin: 0 auto 16px;
    width: 600px;
    height: 50px;
    display: flex;
    span.top1 {
      display: block;
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: white;
      font-size: 40px;
      transform: rotate(90deg);
      cursor: pointer;
    }
    input.top2 {
      flex: 1;
      display: block;
      height: 50px;
      line-height: 50px; 
      padding:0px 20px;
      box-sizing: border-box;
      outline: none;
      font-size: 22px;
      letter-spacing: 1px;
      border: 0;
    }
  }

  div.mian {
    width: 600px;
    min-height: 400px;
    max-height: 760px;
    overflow: scroll;
    background: white;
    margin: 0 auto;
    div.show{
      width: 600px;
      height: 60px;
      display: flex;
      margin-bottom: 16px;
      justify-content: space-evenly;
      input.mian1{
        width: 20px;
        height: 20px;
        display: block;
        margin: 20px 0 0 20px;
      }
      p.mian11{
        height: 60px;
        flex: 1;
        line-height: 60px;
        padding-left: 70px;
        box-sizing: border-box;
        margin: 0;
        text-align: start;
      }
      input.mian2{
        height: 60px;
        flex: 1;
        line-height: 60px;
        padding-left: 16px;
        box-sizing: border-box;
        outline: none;
        border: 0;
      } 
      span.mian3{
        width: 40px;
        height: 60px;
        cursor: pointer;
        text-align: center;
        line-height: 50px;
        font-size: 36px;
        display: none;
      }
    }
    div.show:hover span.mian3{
        display:block;
      }
  }
 div.mian::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: rgba(240, 240, 240, 1);
}

  div.bottom {
    margin: 4px auto 0;
    width: 600px;
    height: 20px;
    background: white;
    span.bo3{
      display: block;
      width: 60px;
      height: 20px;
      line-height: 20px;
      font: 12px;
      text-align: center;
      cursor: pointer;
      float: right;
    }
    span.bo2{
      display: block;
      width: 60px;
      height: 20px;
      line-height: 20px;
      font: 12px;
      text-align: center;
      cursor: pointer;
      float: right;
    }
    span.bo1{
      display: block;
      width: 100px;
      height: 20px;
      line-height: 20px;
      font: 12px;
      text-align: center;
      cursor: pointer;
      float: right;
    }
  }
}
</style>